<template>
  <div class="tab_installed">
    <div class="tab_inner">
      <div class="panel_left">
        <div class="panel_left_item"
             v-for="(item, index) in menus"
             @click="changeActiveIndex(index)"
             :class="{active: activeIndex == index}">
          {{item.label}}
        </div>
        <!-- <div class="panel_left_item"
             @click="changeActiveIndex(0)"
             :class="{active: activeIndex == 0}">
          快捷键设置
        </div>
        <div class="panel_left_item"
             @click="changeActiveIndex(1)"
             :class="{active: activeIndex == 1}">
          扩展设置
        </div> -->
        <!-- <div class="panel_left_item"
             @click="changeActiveIndex(1)"
             :class="{active: activeIndex == 1}">
          服务设置
        </div> -->
      </div>
      <div class="panel_right">
        <component :active-tab="activeTab"
                   :is="menus[activeIndex].component"></component>
        <!-- <CommonSettings :active-tab="activeTab"
                        v-if="activeIndex == 0"></CommonSettings>
        <Extensions v-else-if="activeIndex == 1"></Extensions> -->
        <!-- <SocketSettings :active-tab="activeTab"
                        v-else-if="activeIndex == 1"></SocketSettings> -->
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Settings',
  props: {
    activeTab: {
      type: String,
      default: ''
    }
  },
  components: {
    CommonSettings: () => import('./Common'),
    Extensions: () => import('./Extensions')
    // SocketSettings: () => import('./Socket/index.vue')
  },
  data () {
    return {
      list: [],
      activeIndex: 0,
      menus: [
        {
          label: '快捷键设置',
          component: 'CommonSettings'
        },
        {
          label: '扩展设置',
          component: 'Extensions'
        }
      ]
    }
  },
  mounted () {
    this.$nextTick(() => {
      // eventBus.$on('plugin-remove-response', this.pluginRemoveResponse)
    })
  },
  methods: {
    changeActiveIndex (index) {
      this.activeIndex = index
    },
    gotoTabPlugins (e) {
      e.preventDefault()
      this.$emit('tab-change', {
        name: 'Plugins'
      })
    },
    pluginRemoveResponse (response) {
      if (response._tab == 'Installed') {
        let pindex = -1
        for (let i = 0; i < this.list.length; i++) {
          if (this.list[i].id == response.data.id) {
            pindex = i
            i = this.list.length
          }
        }
        if (pindex > -1) {
          this.list.splice(pindex, 1)
          eventBus.$emit('uninstall-plugin', response.data)
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import url("../../themes/index.less");
.tab_installed {
  position: relative;
  width: 100%;
  height: 100%;
  .tab_inner {
    position: relative;
    width: 100%;
    height: calc(~"100% - 36px");
    .panel_left {
      position: absolute;
      left: 0;
      width: 200px;
      height: 100%;
      box-shadow: -20px -5px 22px -22px rgba(217, 217, 217, 0.8) inset;
      background-color: lighten(@darkDividerColor, 85);
      &_item {
        width: 100%;
        height: 40px;
        padding: 0 15px;
        box-sizing: border-box;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        &:hover {
          background-color: @activeBgColor;
        }
        &.active {
          background-color: @activeBgColor;
        }
      }
    }
    .panel_right {
      position: absolute;
      left: 200px;
      width: calc(~"100% - 200px");
      height: 100%;
    }
  }
}
</style>